<template>
  <view class="work-container">
    <TopBar
      :tabBars="tabBars"
      :tabIndex="tabIndex"
      @change="onTabChange"
    ></TopBar>
    <component
      ref="listRef"
      v-bind:is="currentTabComponent"
      :data="data"
    ></component>
  </view>
</template>

<script>
import TopBar from '@/components/top-bar/index.vue';
import wait from './wait.vue';
import have from './have.vue';
import sheet from './sheet.vue';
import { getTitleNum } from '@/api/equipment/Inspection-new.js';
export default {
  components: {
    TopBar,
    wait,
    have,
    sheet,
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex)
        .componentName;
    },
  },
  onShow() {
    getTitleNum().then((res) => {
      let result = res.data;
      this.tabBars.forEach((item) => {
        let findData = result.find((it) => it.titleName === item.copyName);
        if (findData) {
          item.name = findData.titleName + '(' + findData.titleNum + ')';
        }
      });
    });
    this.$refs.listRef && this.$refs.listRef.initData();
  },
  onReachBottom() {
    this.$refs.listRef && this.$refs.listRef.reachBottom();
  },
  onPullDownRefresh() {
    getTitleNum().then((res) => {
      let result = res.data;
      this.tabBars.forEach((item) => {
        let findData = result.find((it) => it.titleName === item.copyName);
        if (findData) {
          item.name = findData.titleName + '(' + findData.titleNum + ')';
        }
      });
    });
    this.$refs.listRef && this.$refs.listRef.initData();
  },
  data() {
    return {
      tabBars: [
        {
          name: '待巡检',
          copyName: '待巡检',
          componentName: 'wait',
          index: 0,
        },
        {
          name: '已巡检',
          copyName: '已巡检',
          componentName: 'have',
          index: 1,
        },
        {
          name: '巡检表',
          copyName: '巡检表',
          componentName: 'sheet',
          index: 2,
        },
      ],
      tabIndex: 0,
      data: null,
    };
  },
  methods: {
    onTabChange(obj) {
      this.tabIndex = obj.index;
    },
  },
};
</script>

<style lang="scss" scoped>
.work-container {
  padding-bottom: 50rpx;
}
</style>
